@font-face {
	font-family: codropsicons;
	src: url(../fonts/codropsicons/codropsicons.eot?#iefix) format("embedded-opentype"), url(../fonts/codropsicons/codropsicons.woff) format("woff"), url(../fonts/codropsicons/codropsicons.ttf) format("truetype"), url(../fonts/codropsicons/codropsicons.svg#codropsicons) format("svg");
	font-weight: normal;
	font-style: normal;
}
* {
	box-sizing: border-box;
}
*::after {
	box-sizing: border-box;
}
*::before {
	box-sizing: border-box;
}
.clearfix::before {
	display: table; content: "";
}
.clearfix::after {
	display: table; content: "";
}
.clearfix::after {
	clear: both;
}
body {
	background: rgb(249, 247, 246); color: rgb(64, 77, 91); font-size: 1em; font-weight: 300;
}
a {
	color: rgb(64, 77, 91); text-decoration: none;
}
section {
	padding: 5em 2em;
}
section p {
	margin: 0px auto; line-height: 1.518; font-size: 2em; max-width: 1200px;
}
.codrops-header {
	padding: 5em 2em; letter-spacing: -1px;
}
.codrops-header h1 {
	margin: 0px auto; line-height: 1; font-size: 5em; font-weight: 800; max-width: 1200px;
}
.codrops-header h1 span {
	color: rgb(195, 200, 205); padding-top: 0.32em; font-size: 50%; font-weight: 400; display: block;
}
.codrops-top {
	width: 100%; text-transform: uppercase; line-height: 2.2; font-size: 0.69em; font-weight: 500;
}
.codrops-top a {
	padding: 0px 1em; color: rgb(52, 73, 94); letter-spacing: 1px; text-decoration: none; display: inline-block;
}
.codrops-top a:hover {
	color: rgb(251, 104, 89);
}
.codrops-top a:focus {
	color: rgb(251, 104, 89);
}
.codrops-top span.right {
	float: right;
}
.codrops-top span.right a {
	float: left; display: block;
}
.codrops-icon::before {
	margin: 0px 4px; text-transform: none; line-height: 1; font-family: "codropsicons"; font-style: normal; font-variant: normal; font-weight: normal; speak: none; -webkit-font-smoothing: antialiased;
}
.codrops-icon-drop::before {
	content: "\e001";
}
.codrops-icon-prev::before {
	content: "\e004";
}
.related {
	text-align: center;
}
.related p {
	padding: 2em 0px; font-size: 2em; font-weight: 500;
}
.related > a {
	margin: 20px 10px; padding: 25px; border: 1px solid rgb(51, 51, 51); border-image: none; text-align: center; display: inline-block; white-space: pre-line;
}
.related a:hover {
	border-color: rgb(51, 51, 51);
}
.related a img {
	max-width: 100%; opacity: 0.8;
}
.related a:hover img {
	opacity: 1;
}
.related a:active img {
	opacity: 1;
}
.related a h3 {
	margin: 0px; padding: 0.5em 0px 0.3em; text-align: left; font-size: 1.2em; max-width: 300px;
}
@media screen and (max-width:767px)
{
	section {
		padding: 2em 1em;
	}
	section p{
		font-size: 1.2em;
	}
}
@media screen and (max-width:25em)
{
	.codrops-icon span {
		display: none;
	}
}
